{% extends "eventos/base.html" %}
    
{% block extrahead %}
    {% load static %}
    {% get_static_prefix as STATIC_PREFIX %}
    <link rel="stylesheet" href="{{ STATIC_PREFIX }}css/jquery/ui/jquery.ui.all.css">
    <!--link rel="stylesheet" href="{{ STATIC_PREFIX }}css/jquery/ui/jquery.ui.demos.css"-->
    <link rel="stylesheet" href="{{ STATIC_PREFIX }}css/jquery/ui/jquery-ui-1.8.16.custom.css">
    <link rel="stylesheet" href="{{ STATIC_PREFIX }}css/jquery/ui/jquery.ui.core.css" type="text/css"/>
    <!--     jquery/acordion       -->
    <script type="text/javascript" src="{{ STATIC_PREFIX }}js/jquery/jquery-1.7.min.js"></script>
    <script type="text/javascript" src="{{ STATIC_PREFIX }}js/jquery/ui/jquery.ui.core.js"></script>
    <script type="text/javascript" src="{{ STATIC_PREFIX }}js/jquery/ui/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="{{ STATIC_PREFIX }}js/jquery/jquery.nestedAccordion.js"></script>
    <!-- ......................... -->

    <script type="text/javascript">
    $("html").addClass("js");
    $(function() {
        $("#main").accordion({
            objID: "#acc1", 
            el: ".h", 
            head: "h4, h5", 
            next: "div", 
            initShow : "div.shown",
            standardExpansible : true
        });
        $("html").removeClass("js");
        
        
        setContador();
    });

    var contador = 1;
    var contador1 = 0;
    var contadorR = 0;
    
    // prepara diccionario de participantes por categoria
    diccionario = {};
    algo = new Array()
    
    {% for deporte in evento %}
        {% for disciplina in deporte.disciplinas %}
            {% for categoria in disciplina.categorias %}
                algo = new Array()
                {% for participante in participantes %}
                    {% if  categoria.id in participante.xml_resultado %}
                        algo.push(new Array('{{ participante.atleta.pk }}','{{ participante.atleta.nombre_completo }}'))
                    {% endif %}
                {% endfor %}
                diccionario["{{ categoria.nombre_completo }}"] = algo
            {% endfor %}
        {% endfor %}
    {% endfor %}
    
    // obtiene el dropdownlist a partir de los participantes por categoria
    function getLista(categoria, IdNO){
    
        var len = "";
        var count = Object.keys(diccionario[categoria]).length;
        if (count > 0){
            for (var i = 0; i < count; i++) {
                
                if (diccionario[categoria][i][0] != IdNO)
                    len += "<option value='"+diccionario[categoria][i][0]+"'>"+ diccionario[categoria][i][1] +"</option>";
            }
        }
        
        return len
    }
    
    // agrega los campos y botones de resultado
    function agregarResultado(tipo_resultado, categoria, Did, resCont,principal){
        borrarBoton(categoria,(resCont-1),principal);
        contador++ ;
        var resultados = document.getElementById(categoria);
        var newResultado = document.createElement("div");
        newResultado.setAttribute("id",categoria+resCont);
        newResultado.innerHTML="Atleta: <select type=\"text\" name=\""+Did+"-"+resCont+"-0\"><option></option>"+getLista(categoria,'0')+"</select>\
        Lugar: <input type=\"text\" name=\""+Did+"-"+resCont+"-1\"/> \
        "+ tipo_resultado +": <input type=\"text\" name=\""+Did+"-"+resCont+"-2\"/> \
        <button id=\""+categoria+"menos"+resCont+"\" type=\"button\" onClick=\"quitarResultado(\'"+categoria+"\',\'"+(resCont+1)+"\')\" disabled>-</button>\
        <button id=\""+categoria+"mas"+resCont+"\" type=\"button\" onClick=\"agregarResultado(\'"+tipo_resultado+"\',\'"+categoria+"\',\'"+Did+"\',"+(resCont+1)+",1)\">+</button>";
        resultados.appendChild(newResultado);
        
        //aumentar contador
        var cont = document.getElementById(Did+"-cont");
        cont.value++;
        
    };
    
    // borra el boton anterior de agregar resultado
    function borrarBoton(categoria,id,principal){
        
        if (principal==0){
            var divCategoria = document.getElementById(categoria);
            var removerElemento = document.getElementById(categoria+'mas'+id);
            divCategoria.removeChild(removerElemento);
        }
        else{
            //borrar boton mas
            var divCategoria = document.getElementById(categoria+id);
            var removerElemento = document.getElementById(categoria+'mas'+id);
            divCategoria.removeChild(removerElemento);
            //activar boton menos
            //document.boton.disabled=!document.boton.disabled
            var botonMenos = document.getElementById(categoria+'menos'+id);
            botonMenos.disabled = !botonMenos.disabled
        }
    }
    
    // quita el resultado del boton presionado
    function quitarResultado(categoria,elemento){
    
        var divCategoria = document.getElementById(categoria);
        var removerElemento = document.getElementById(categoria+(elemento-1));
        divCategoria.removeChild(removerElemento);
    };
    
    // arregla contadores de resultados
    function setContador(){
        
        if (contador1 == 1){
            
            var cont = document.getElementById('contadoresValidos').value / 2;
            //cont.value = cantContadores.length -3;
            
            var node = document.getElementById('contadores');
            var len = node.childNodes.length;

            for(var i = 0; i < cont; i++)
            {
                node.removeChild(node.lastChild);
            }
        }
    };   
    
    // carga todos los resultados existentes
    function initResultados(tipo_resultado, categoria, Did, listaResultados){
    
        //borrarBoton(categoria,(resCont-1),principal);
        //contador++ ;
        
        if (contadorR == 0){
        
            var resultados = document.getElementById(categoria);
            //var listaResultados = [['1','a'],['2','b'],['3','c']];
            cantInitResultados = listaResultados.length;
            
            if ( cantInitResultados == 0){
                var newResultado = document.createElement("button");
                newResultado.setAttribute("id",categoria+"mas0");
                newResultado.setAttribute("type","button");
                newResultado.setAttribute("onClick","agregarResultado(\'"+tipo_resultado+"\',\'"+categoria+"\',\'"+Did+"\',1,0);");
                newResultado.innerHTML = "+";
                resultados.appendChild(newResultado);
                //<button id="{{categoria.nombre_completo}}mas0" type="button" onClick="agregarResultado('{{disciplina.tipo_resultado}}','{{categoria.nombre_completo}}','{{categoria.id}}',1,0);">+</button>
            }
            
            for (var i = 0; i < cantInitResultados; i++) {
                //borrar boton anterior
                if (i > 0 )
                    borrarBoton(categoria,i,1);
                    
                var newResultado = document.createElement("div");
                newResultado.setAttribute("id",categoria+(i+1));
                //TODO: crear select con primera opcion: el atleta seleccionado, y agregar todos los demas
                newResultado.innerHTML="Atleta: <select type=\"text\" name=\""+Did+"-"+(i+1)+"-0\"><option value = \""+listaResultados[i][0]+"\">"+getNombreAtleta(categoria,listaResultados[i][0])+"</option>"+getLista(categoria,listaResultados[i][0])+"</select>\
                Lugar: <input type=\"text\" name=\""+Did+"-"+(i+1)+"-1\" value = \""+listaResultados[i][1]+"\"/> \
                "+ tipo_resultado +": <input type=\"text\" name=\""+Did+"-"+(i+1)+"-2\" value = \""+listaResultados[i][2]+"\"/> \
                <button id=\""+categoria+"menos"+(i+1)+"\" type=\"button\" onClick=\"quitarResultado(\'"+categoria+"\',\'"+(i+2)+"\')\" disabled>-</button>\
                <button id=\""+categoria+"mas"+(i+1)+"\" type=\"button\" onClick=\"agregarResultado(\'"+tipo_resultado+"\',\'"+categoria+"\',\'"+Did+"\',"+(i+2)+",1)\">+</button>";
                resultados.appendChild(newResultado);
                
                //aumentar contador
                var cont = document.getElementById(Did+"-cont");
                cont.value++;
            }
        }
    }
    
    // obtiene el nombre del atleta a partir de su pk
    function getNombreAtleta(categoria, id){
        
        var count = Object.keys(diccionario[categoria]).length;
        for (var i = 0; i < count; i++) {
            
            if (diccionario[categoria][i][0] == String(id)){
                
                return diccionario[categoria][i][1];
            }
        }
        
        return "";
    }
    
    </script>
{% endblock %}

{% block breadcrumb %} <a href="/">Inicio</a> > <a href='/eventos/'>Eventos</a> > <a href='/eventos/ver/{{nombre.pk}}/'>{{nombre.nombre}} {{nombre.edicion}}</a> > Resultados {% endblock %}

{% block content %}
<!-- <a href="/">Home</a> > <a href="/eventos/">Eventos</a> > Ver -->

<form action="" method="post">{% csrf_token %}
<div id="main">
    <h2>Evento: {{nombre.nombre}}</h2>
    <h3>Deportes</h3>
    
    <div id="contadores">
        <input id ="contadoresValidos" type="hidden" value = "0"/>
    </div>
    
    <ul id="acc1" class="accordion">

        {% for deporte in evento%}
            <li>
                <h4>{{ deporte.nombre }}</h4>
                <div class="inner">
                    <ul>
                        {% for disciplina in deporte.disciplinas%}
                            <li>
                                <h5>{{ disciplina.nombre }}</h5>
                                <div class="inner">
                                    <ul>
                                        {% for categoria in disciplina.categorias%}
                                            <li>
                                                <h5>{{ categoria.nombre_completo }}</h5> 
                                                <!-- Inicia Resultados -->
                                                <div class="inner" >
                                                    <div id="{{categoria.nombre_completo}}">
                                                        
                                                        <script>
                                                            var lista = []
                                                            //prepara lista de resultados existentes
                                                            {% for resultado in categoria.resultados %}
                                                            lista.push(['{{resultado.atleta}}','{{resultado.posicion}}','{{resultado.valor}}'])
                                                            {% endfor %}
                                                            
                                                            //prepara contadoresValidos
                                                            {% if forloop.last %}
                                                            var cont = document.getElementById('contadoresValidos');
                                                            cont.value = (cont.value-0)+{{ forloop.counter }};
                                                            {% endif %}
                                                            
                                                            //crear contadores
                                                            var divContadores = document.getElementById('contadores');
                                                            var tal = document.createElement("input");
                                                            tal.setAttribute("name",'{{ categoria.id }}-cont');
                                                            tal.setAttribute("id",'{{ categoria.id }}-cont');
                                                            tal.setAttribute("type",'hidden');
                                                            tal.setAttribute("value",0);
                                                            divContadores.appendChild(tal);
                                                            
                                                            //agrega resultados existentes
                                                            initResultados('{{disciplina.tipo_resultado}}','{{categoria.nombre_completo}}','{{categoria.id}}',lista);
                                                        </script>
                                                        
                                                    </div>
                                                </div>
                                                <!-- Termina Resultados -->
                                            </li>
                                        {% endfor%}
                                    </ul>
                                </div>
                            </li>
                        {% endfor%}
                    </ul>
                </div>
            </li>
            
        {% endfor%}
    </ul>
    <br>
<div id='buttons' align='right'>
<input type="submit" class='savebuton' value="Guardar" name='boton_guardar'/>
<!--input type="submit" class='savebuton' value="Guardar y continuar editando" name='boton_guardar_y_editar'/-->
<input type="submit" class='cancelbuton' value="Cancelar" name='boton_cancelar'/>
</div>
</div>
</form>

<script>
contador1++;
contadorR++;
</script>
{% endblock %}
